<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>购物车</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${s.base}/mobile/css/font-awesome.min.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/aui.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/shopmain.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/cart.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/theme-color.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .commodity_list .commodity_list_term li {
            position: relative;
            overflow: hidden;
            padding: 20px 0 25px 0px;
        }
        .commodity_list .commodity_list_term li .div_center{margin-top: 0px;}
        .commodity_list .commodity_list_term li img{width: 60px;
            height: 60px;
            max-width: 60px;
            max-height: 60px;}
        .commodity_list .commodity_list_term li .div_center span{font-size:0.66rem;line-height:0.66rem;}

        .commodity_list .commodity_list_term li .div_right_title{
            position: absolute;
            bottom: 20px;
            left: 26%;
            font-size:0.66rem;
            overflow: hidden;
            text-align: center;
            line-height: 0.8rem;
        }
        .commodity_list .commodity_list_term li .div_right{
            position: absolute;
            bottom: 11px;
            left: 26%;
            margin-left: 3.3rem;
            border: solid 1px #e6e6e6;
            border-radius: 4px;
            width: 6rem;
            overflow: hidden;
            text-align: center;
            line-height: 26px;
        }
        .commodity_list .commodity_list_term li .bwBtn{
            position: absolute;
            bottom: 11px;
            left: 26%;
            margin-left: 10rem;
            border: solid 1px #f00;
            border-radius: 4px;
            width: 2.5rem;
            color: #F00;
            overflow: hidden;
            text-align: center;
            line-height: 26px;
        }

        .commodity_list .commodity_list_term li .div_right span {
            float: left;
            width: 50%;
            border-left: solid 1px #e6e6e6;
            border-right: solid 1px #e6e6e6;
            color: #333;
        }
        .commodity_list .commodity_list_term li .div_right i{
            float: left;
            width: 25%;
            color: #333;
            font-style: normal;
        }
    </style>
</head>
<body>
<form method="post" name="cart_form" target="_self" id="cart_form" action="">
<header class="zyw-header">
    <div class="zyw-container white-color">
        <div class="head-l"><a href="javascript:window.history.back(-1)" target="_self"><img src="${s.base}/mobile/images/svg/head-return.svg" alt=""></a></div>
        <h1>购物车</h1>
        <!--<div class="head-r"><a href="javascript:void(0)" style="color: #fff;" id="editerBtn" onclick="editerBtn(this)">编辑</a></div>-->
    </div>
</header>
<footer class="zyw-footer">
    <div class="zyw-container white-bgcolor">
        <div class="settle_box">
            <dl class="all_check select">
                <dt>
                    <span id="all_pitch_on" onclick="all_pitch_on();"></span>
                    <em>全选</em>
                </dt>
            </dl>
            <dl class="total_amount wanContent">
                <dt>
                    合计：
                    <p id="total_price">
                        ¥<b id="showMoney">0</b>
                    </p>
                </dt>
                <dd>不含运费</dd>
            </dl>
            <input type="hidden" name="gcs" id="gcs"/>
            <a class="settle_btn wanContent" href="javascript:confirm_cart(this);" id="confirm_cart">去结算</a>
            <a class="settle_btn" href="javascript:big_cart_remove(this);" style="display: none;" id="confirm_delete" >删除</a>
        </div>
    </div>
</footer>
<section class="zyw-container">
    <!--list-->
    <div class="commodity_list_box">
        <!--商品列表-->
        <div class="commodity_box">
            <div class="commodity_list" id="showContent">
                <!--商品-->
                <!--<ul class="commodity_list_term">
                    <li class="select">
                        <em aem="0" cart_id="84"></em>
                        <img src="https://img13.360buyimg.com/mobilecms/s140x140_jfs/t3229/10/2021133198/376218/cfcc06cb/57d8e84eNfe92eae8.jpg"/>
                        <div class="div_center">
                            <h4>iphone8 plus 256G颜色随机</h4>
                            <span>总需9590人次&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: red">剩余17000次</span></span>
                        </div>
                        <span>参与人次</span>
                        <div class="div_right">
                            <i onclick="reducew(this)">-</i>
                            <span class="zi">1</span>
                            <input type="hidden" value="84">
                            <i onclick="plusw(this)">+</i>
                        </div>
                    </li>
                </ul>-->

            </div>
        </div>
        <!-- 商品列表 end -->
    </div>
    <!-- end -->
</section>
</form>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script type="text/javascript" src="${s.base}/mobile/js/dropload.min.js"></script>
<script type="text/javascript" src="${s.base}/js/layer/layer.js"></script>
<script type="text/javascript" src="${s.base}/mobile/js/passwordBox.min.js"></script>
<script type="text/javascript" src="${s.base}/js/base/commont.js"></script>
<script>
    var memberId = '${memberId}';
    var payPassword = '${payPassword}';
    $(function(){
        show();
    });

    function confirm_cart() {
        var arr = [];
        // 获取到商品活动id及购买数量
        $(".commodity_list_term").each(function(){
            var hasClass = $(this).find("em").hasClass("pitch_on");
            if (hasClass){
                var activity={};
                activity.id = $(this).find("input[name='id']").val();
                activity.activityId = $(this).find("input[name='activityId']").val();
                activity.itemId = $(this).find("input[name='itemId']").val();
                var personNum = $(this).find("input[name='winNum']").attr("data-price");
                activity.num = $(this).find("input[name='winNum']").val() * personNum;
                arr.push(activity);
            }
        });
        if (arr == null || arr.length == 0) {
            layer.alert("请选择要选择的商品！");
            return false;
        }
        var cartJson = JSON.stringify(arr);
        payMethod(memberId,cartJson);
    }

    function payMethod(memberId,cartJson){
        if(payPassword == null || payPassword == ""){
            layer.alert("您必须先设置支付密码！");
            return false;
        }
        PwdBox.init(payPassword,'/mobile/images/pwd_keyboardw.png','请输入支付密码','安全支付环境，请放心使用！');
        PwdBox.show(function(res){
            if(res.status){
                var password=res.password;
                $.post("/cart/emptyCart",{
                    memberId : memberId,
                    cartJson : cartJson
                },function(result){
                    if(1==result.returnInfo.state){
                        showLayerAlertNoRefre("购买成功！");
                    }else{
                        showLayerAlertNoReload(result.returnInfo.errorMsg);
                    }
                },"json");
            }else{
                //重置输入
                layer.alert('密码不正确，请重新输入！');
                //关闭并重置密码输入
                PwdBox.reset();
                show();
            }
        });
    };

    //下拉数据
    function show() {
        $('#showContent').html("");
        var counter = -5;
        // 每页展示5个
        var num = 5;
        var pageStart = 0,pageEnd = 0;
        // dropload
        $('#content_div').dropload({
            scrollArea : window,
            loadDownFn : function(me){
                pageStart++;
                counter = counter + num;

                $.post("/cart/jsonList",{
                    limit : num,
                    page : pageStart,
                    orderType : 4,
                    status : 2
                },function(resultInfo){
                    if (resultInfo.code == 0){
                        var result = '';
                        console.log(resultInfo);
                        if(resultInfo.count <= counter){
                            me.lock();
                            // 无数据
                            me.noData();
                            //break;
                            return false;
                        }

                        if (resultInfo.data.length > 0){
                            for(var i=0;i<resultInfo.data.length;i++){
                                //console.log("测试:"+counter);
                                var items=resultInfo.data[i];
                                result += '<ul class="commodity_list_term">'+
                                    '<input type="hidden" name="id" value="'+items.id+'">'+
                                    '<input type="hidden" name="activityId" value="'+items.activityId+'">'+
                                    '<input type="hidden" name="itemId" value="'+items.itemId+'">'+
                                    '<li class="select">'+
                                    '<em aem="0" cart_id="84"></em>'+
                                    '<img height="140" width="140" src="'+items.imageOne+'"/>'+
                                    '<div class="div_center">'+
                                    '   <h4>'+items.itemTitle+'</h4>'+
                                    '   <span>总需'+items.totalNum+'人次&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: red">剩余'+(items.totalNum-items.readyNum)+'次</span></span>'+
                                    '</div>'+
                                    '<span class="div_right_title">参与人次</span>'+
                                    '<div class="div_right">'+
                                    '   <i onclick="jian(this)">-</i>'+
                                    '   <span class="zi">1</span>'+
                                    '   <input type="hidden" name="winNum" data-price="'+items.price+'" value="1">'+
                                    '   <i onclick="jia(this)">+</i>'+
                                    '</div>' +
                                    '<span class="bwBtn" onclick="baowei(this)">' +
                                    '<input type="hidden" class="maxNum" value="'+(items.totalNum-items.readyNum)+'">' +
                                    '包尾</span>'+
                                    '</li>'+
                                    '</ul>';
                            }
                        }
                        $('#showContent').append(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                        $(".commodity_list_term .select em").bind("click",function () {
                            if($(this).attr("class")!=null && $(this).attr("class").indexOf("pitch_on")!=-1){
                                $(this).removeClass("pitch_on");
                            }else{
                                $(this).addClass("pitch_on");
                            }
                            allMoney();
                        });
                    }
                },"json");
            }
        });
    }

    function editerBtn(obj) {
        if($(obj).html()=="编辑"){
            $(obj).html("完成");
            $(".wanContent").hide();
            $("#confirm_delete").show();
        }else{
            $(obj).html("编辑");
            $(".wanContent").show();
            $("#confirm_delete").hide();
        }
        allMoney();
    }

    function all_pitch_on() {
        if($(this).attr("class")!=null && $(this).attr("class").indexOf("pitch_on")!=-1){
            $(this).removeClass("pitch_on");
            $(".commodity_list_term .select em").removeClass("pitch_on");
        }else{
            $(this).addClass("pitch_on");
            $(".commodity_list_term .select em").addClass("pitch_on");
        }
        allMoney();
    }

    function jia(obj) {
        var num=$(obj).parent().find("input").val();
        var maxNum=$(obj).parent().parent().find(".maxNum").val();

        if(num*1>0){
            $(obj).parent().find(".zi").html(num*1+1);
            $(obj).parent().find("input").val(num*1+1);
        }else if(num*1>=maxNum){
            $(obj).parent().find(".zi").html(maxNum);
            $(obj).parent().find("input").val(maxNum);
        }else{
            $(obj).parent().find(".zi").html(1);
            $(obj).parent().find("input").val(1);
        }
        allMoney();
    }
    function jian(obj) {
        var num=$(obj).parent().find("input").val();
        if(num*1>1){
            $(obj).parent().find(".zi").html(num*1-1);
            $(obj).parent().find("input").val(num*1-1);
        }else{
            $(obj).parent().find(".zi").html(1);
            $(obj).parent().find("input").val(1);
        }
        allMoney();
    }
    function baowei(obj) {
        var maxNum=$(obj).find(".maxNum").val();
        $(obj).parent().find(".zi").html(maxNum);
        $(obj).parent().find("input").val(maxNum);
        allMoney();
    }

    function allMoney() {
        var allMoney=0;
        $("#showContent .pitch_on").each(function (index,obj) {
            var num=$(obj).parent().find(".div_right input").val();
            var price=$(obj).parent().find(".div_right input").attr("data-price");
            allMoney=allMoney*1+num*1*price*1;
        })
        $("#showMoney").html(allMoney);
    }
</script>
</body>
</html>